<template>
    <div class="warp">


        <el-row class="row-bg" justify="center">

            <el-col :span="9">

                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>注册</span>
                            <el-button class="button" text @click="toLogin">去登录</el-button>
                        </div>
                    </template>
                    <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" status-icon>
                        <el-form-item label="手机号" prop="tel">
                            <el-input v-model="formData.tel"/>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="formData.password" type="password"/>
                        </el-form-item>
                        <el-form-item label="再次密码" prop="password2">
                            <el-input v-model="formData.password2" type="password"/>
                        </el-form-item>
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="formData.email"/>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm(formRef)">
                                注册
                            </el-button>
                            <el-button @click="resetForm(formRef)">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>

            </el-col>

        </el-row>


    </div>
</template>
<script setup lang="ts">
import {ref, onMounted, reactive} from 'vue'
import {ElMessage} from 'element-plus'
import {Md5} from 'ts-md5';
import {userApi} from '@/api'
import {useRouter} from 'vue-router'

const router = useRouter()
const formRef = ref()

const formData = reactive({
    tel: '13137035790',
    password: 'By123456',
    password2: 'By123456',
    email: '12123@qq.com'
})

const rules = reactive({
    tel: [
        {required: true, message: '手机号必填', trigger: 'blur'},
        {
            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '手机号必须为11位',
            trigger: 'blur'
        },
    ],
    password: [
        {required: true, message: '密码必填', trigger: 'blur'},
        {
            pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/,
            message: '大小写字母和数字的组合，长度在8-10之间',
            trigger: 'blur'
        },
    ],
    password2: [
        {required: true, message: '密码必填', trigger: 'blur'},
        {
            pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/,
            message: '大小写字母和数字的组合，长度在8-10之间',
            trigger: 'blur'
        },
    ],
    email: [
        {required: true, message: '邮箱必填', trigger: 'blur'},
        {type: 'email', message: '邮箱格式不正确', trigger: 'blur'},
    ],

})

const formSubmit = () => {

    if (formData.password != formData.password2) {

        ElMessage.error("两次密码不一致")
        return
    }
    console.log('验证成功，准备提交表单!')
    let tel = formData.tel
    //md5加密后的密码
    const md5Pwd = Md5.hashStr(formData.password).toUpperCase();
    userApi.register.call({tel, password: md5Pwd}).then((res: any) => {

        if (res === 1) {
            ElMessage.success("注册成功")
            router.push({name: "user-login"})

        }

    })

}

const submitForm = async (formEl: any) => {
    if (!formEl) return
    await formEl.validate((valid: any, fields: any) => {
        if (valid) {
            formSubmit()
        } else {
            console.log('error submit!', fields)
        }
    })
}
const resetForm = (formEl: any) => {
    if (!formEl) return
    formEl.resetFields()
}
const toLogin = () => {
    router.push({name: 'user-login'})
}


</script>
<style scoped>
.warp {

    width: 100%;
    height: 100%;
    position: fixed;
    background-size: 100% 100%;
}

.box-card {
    margin-top: 40%;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>